<template>
  <div class="homedetails">
    
    <h2>
      <router-link to="/">
          <span class="iconfont icon-zuojiantou"></span>
      </router-link>
      <p>2月22日</p>
      <span class="iconfont icon-xiazai10" @click="showShare = true"></span>
    </h2>

    <div class="container">
      <h1>
        <router-link to="/homeDetails/homeListOne">
          <span>
            <i>今日三餐</i>
            <i></i>
          </span>
        </router-link>
        <router-link to="/homeDetails/homeListTwo">
          <span>
            <i>明日三餐</i>
            <i></i>
          </span>
        </router-link>
      </h1>
      <router-view></router-view>
      <div class="empty"></div>
    </div>

    <van-share-sheet
      v-model="showShare"
      :options="options"
      title="立即分享给好友"
      description="今天的幸运水果是什么"
    />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link", description: "" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  components:{
  },
    methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style scoped>

van-share-sheet{
    height: 1.5rem;
    position: fixed;
    bottom: 1rem;
}
.iconfont{
  font-weight: 600;
  font-size: .24rem;
}
h2 {
  background-color: #fff;
  position: fixed;
  top: 0;
  font-size: 0.36rem;
  font-weight: 700;
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h2 span {
  text-align: center;
  line-height: 0.38rem;
  width: 0.38rem;
  height: 0.38rem;
  background-color: #fff;
  opacity: 0.7;
  border-radius: 50%;
  margin: 0 0.2rem;
}
.empty {
  height: 0.1rem;
  background-color: rgb(238, 237, 237);
}
p {
  font-size: 0.2rem;
  font-weight: 700;
}
.container {
  margin-top: 0.6rem;
}
h1 {
  height: 0.5rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
h1 span {
  color: #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
h1 span i:nth-child(2) {
  margin-top: 0.08rem;
  width: 0.2rem;
}
.router-link-active span {
  color: black;
  font-weight: 700;
}
.router-link-active i:nth-child(2) {
  border-bottom: 0.02rem solid green;
}
</style>